<template>
  <el-card>
    <div ref="mybarchart" class="mybarchart" style="height: 400px" />
  </el-card>
</template>

<script>
import { echarts, elementResizeDetectorMaker } from './index'
import { option1 } from './options'
export default {
  name: 'MyBarChart',
  data() {
    return {
      myChart: null,
      option: {}
    }
  },
  mounted() {
    this.chartInit()
  },

  methods: {
    async chartInit() {
      this.myChart = echarts.init(this.$refs.mybarchart)
      //   this.option = {
      //     title: {
      //       text: '图形标题',
      //       subtext: '~ax 2020/05/02',
      //       left: 'left',
      //       bottom: '1px'
      //     },
      //     xAxis: {
      //       type: 'category',
      //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      //     },
      //     yAxis: {
      //       type: 'value'
      //     },
      //     series: [
      //       {
      //         data: [120, 200, 150, 80, 70, 110, 130],
      //         type: 'bar'
      //       }
      //     ]
      //   }

      this.myChart.setOption(option1)

      var erd = elementResizeDetectorMaker()
      erd.listenTo(this.$refs.mybarchart, (element) => {
        //   var width = element.offsetWidth
        //   var height = element.offsetHeight
        //   console.log('Size: ' + width + 'x' + height)
        this.myChart.resize()
      })
    }
  }
}
</script>
